<template>
  <div :class="['bw-dom-node-ele-slot']">
    <template v-if="isContainer">
      <div class="dom-node-ele-slot">
        <template v-for="slot in data || []" :key="slot.slotKey">
          <div class="slot-item">
            <div class="slot-name" @click="onExpand(slot)">
              <Icon
                icon="ant-design:right-outlined"
                :class="['icon', slot.isExpand && 'icon-expand']"
              />

              <span class="title"> 插槽 [{{ slot.slotName }}]</span>
            </div>

            <div v-if="slot.isExpand" class="dom-children-node">
              <template v-for="node in slot.children || []" :key="node.nodeId">
                <DomNodeEle
                  :data="node"
                  @select="onSelect"
                  @hide="onHide"
                  @delete="onDelete"
                />
              </template>
            </div>
          </div>
        </template>
      </div>
    </template>

    <template v-else>
      <template v-for="node in data[0]?.children || []" :key="node.nodeId">
        <DomNodeEle
          :data="node"
          @select="onSelect"
          @hide="onHide"
          @delete="onDelete"
        />
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useDomSlot } from './util'

import DomNodeEle from '../domNode/index.vue'

import type { BwNodeSlotInfo } from '../model'
interface BwNodeSlotProps {
  data: Array<BwNodeSlotInfo>
}

const emit = defineEmits(['select', 'hide', 'delete'])
const props = withDefaults(defineProps<BwNodeSlotProps>(), {
  data: () => [],
})

const {
  isContainer,

  onHide,
  onExpand,
  onSelect,
  onDelete,
} = useDomSlot(props, emit)
</script>

<style lang="less" scoped>
.bw-dom-node-ele-slot {
  width: calc(100% - 8px);
  padding-left: 8px;

  .dom-node-ele-slot {
    width: 100%;
    margin-left: -1px;
    margin-bottom: -1px;
    // border: 1px solid #905ebe;

    .slot-item {
      width: 100%;
      margin-bottom: 3px;

      .slot-name {
        height: 30px;
        font-size: 12px;
        cursor: pointer;
        padding-left: 8px;
        border-radius: 4px;
        align-items: center;
        display: inline-flex;
        justify-content: flex-start;
        width: calc(100% - 8px);

        .title {
          font-size: 14px;
          text-indent: 5px;
        }

        &:hover {
          color: #fff;
          background-color: #905ebe;
        }
      }

      .dom-children-node {
        width: calc(100% - 8px);
        padding-left: 8px;
      }
    }

    .icon-expand {
      transform: rotate(90deg);
    }
  }

  :deep(.bw-dom-node) > .dom-node {
    padding-left: 8px;
  }
}
</style>
